<template>
  <h3>案例：自定义图例文字</h3>
  <p>图例圆形无法做到垂直顶部对齐，只能垂直居中。</p>
  <code-demo :code="htmlCode" :scriptCode="scriptCode">
    <chart-base
      style="width: 400px; height: 160px; border: 1px solid #ccc"
      :option="option"
    ></chart-base>
  </code-demo>
</template>

<script setup>
import {
  legendFontSize,
  legendFontColor,
  legendCircleSize,
  ringWidth,
  pureColor,
} from 'ui-lib/components/chart/style'

// 环图半径
const ringRadius = 40

// option
const option = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: 'center',
    right: 20,
    orient: 'vertical',
    align: 'left',
    icon: 'circle',
    itemWidth: legendCircleSize,
    itemHeight: legendCircleSize,
    itemGap: 20,
    formatter() {
      return `原告:案数{high|4}起(22.22%)\n金额{high|1218.22}万元`
    },
    textStyle: {
      padding: [0, 0, 0, 10],
      fontSize: legendFontSize,
      color: legendFontColor,
      lineHeight: 30,
      rich: {
        high: {
          fontSize: 24,
          fontWeight: 'bold',
          padding: [0, 4, 0, 4],
        },
      },
    },
  },
  series: [
    {
      name: '原告被告统计',
      type: 'pie',
      center: ['25%', '50%'],
      radius: [ringRadius, ringRadius + ringWidth],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: '原告', itemStyle: { color: pureColor.purple } },
        { value: 735, name: '被告', itemStyle: { color: pureColor.green } },
      ],
    },
  ],
}
const htmlCode = `<chart-base
  style="width: 400px; height: 160px; border: 1px solid #ccc"
  :option="option"
></chart-base>`

const scriptCode = `import {
  legendFontSize,
  legendFontColor,
  legendCircleSize,
  ringWidth,
  pureColor,
} from 'ui-lib/components/chart/style'

// 环图半径
const ringRadius = 40

// option
const option = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: 'center',
    right: 20,
    orient: 'vertical',
    align: 'left',
    icon: 'circle',
    itemWidth: legendCircleSize,
    itemHeight: legendCircleSize,
    itemGap: 20,
    formatter() {
      return \`原告:案数{high|4}起(22.22%)\\n金额{high|1218.22}万元\`
    },
    textStyle: {
      padding: [0, 0, 0, 10],
      fontSize: legendFontSize,
      color: legendFontColor,
      lineHeight: 30,
      rich: {
        high: {
          fontSize: 24,
          fontWeight: 'bold',
          padding: [0, 4, 0, 4],
        },
      },
    },
  },
  series: [
    {
      name: '原告被告统计',
      type: 'pie',
      center: ['25%', '50%'],
      radius: [ringRadius, ringRadius + ringWidth],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: '原告' },
        { value: 735, name: '被告' },
      ],
    },
  ],
}`
</script>
